<template>
  <div class="boox">
    <div class="top">
      <p class="title">品牌销量排行榜</p>
      <p class="bg"></p>
    </div>
    <div class="middle">
      <span style="flex: 2">排名</span>
      <span style="flex: 2">品牌</span>
      <span style="flex: 5">销量</span>
    </div>
    <div class="bottom" ref="bottom"></div>
  </div>
</template>

<script lang="ts" setup name="RightTop">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
//图片批量引入
let path = import.meta.glob('./svg/*.*', { eager: true })
let bottom = ref()
let colors = ['red', 'yellow', 'black', 'blue', 'green']
let pathList = Object.values(path).map((re: any) => re.default)
onMounted(() => {
  let mycharts = echarts.init(bottom.value)
  mycharts.setOption({
    title: {},
    xAxis: { show: false, splitLine: { show: false } },
    yAxis: [
      {
        show: true,
        data: ['嵩山', '泰山', '武当山', '衡山', '黄山'],
        type: 'category',
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          align: 'left',
          margin: 160,
          formatter: (value: any, index: number) => {
            return '{' + index + '|}             {label|' + value + '}'
          },
          rich: {
            0: {
              align: 'center',
              height: 40,
              backgroundColor: { image: pathList[0], position: 'left' },
            },
            1: {
              height: 40,
              backgroundColor: { image: pathList[1], position: 'left' },
            },
            2: {
              align: 'center',
              height: 40,
              backgroundColor: { image: pathList[2] },
            },
            3: {
              align: 'center',
              height: 40,
              backgroundColor: { image: pathList[3] },
            },
            4: {
              align: 'right',
              height: 40,
              width: 40,
              backgroundColor: { image: pathList[4] },
            },
            label: {
              height: 20,
              fontSize: 20,
              color: 'white',
            },
          },
        },
        //动画部分
        animationDuration: 300,
        animationDurationUpdate: 300,
        max: 4,
        inverse: true,
        splitLine: { show: false },
      },
      {
        show: true,
        position: 'right',
        data: [100, 90, 99, 70, 99],
        animationDuration: 300,
        animationDurationUpdate: 300,
        max: 4,
        inverse: true,
        splitLine: { show: false },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          fontSize: 15,
          color: 'white',
          formatter: (params: any) => (params / 10).toFixed(2) + 'w',
        },
      },
    ],
    series: [
      {
        realtimeSort: true,
        type: 'bar',
        data: [100, 90, 99, 70, 99],
        itemStyle: {
          borderRadius: 20,
          color: (params: any) => {
            return colors[params.dataIndex]
          },
        },
        barWidth: 25,
        showBackground: true,
        backgroundStyle: {
          borderRadius: 20,
          borderWidth: 2,
          borderColor: 'white',
        },
      },
    ],

    grid: {
      top: '0%',
      bottom: '5%',
      right: '15%',
      left: '40%',
    },
  })
})
</script>
<style scoped lang="scss">
.boox {
  height: 100%;
  display: flex;
  flex-direction: column;
  color: white;
  padding: 5px 0;
  flex: 18;
  .top {
    flex: 2;
    p {
      height: 50%;
      font-size: 20px;
    }
    .bg {
      background: url('../../images/dataScreen-title.png') no-repeat left center;
    }
  }
  .middle {
    flex: 2;
    margin: 15px 10px;
    background: url('../../images/rankingChart-bg.png') no-repeat;
    background-size: cover;
    display: flex;
    text-align: center;
    line-height: 50px;
  }
  .bottom {
    flex: 12;
  }
}
</style>
